<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object的defineProperty()</title>
</head>
<body>
    <!-- 
        Objec.defineProperty() 
        1.这个方式是Es5新增的
        2.这个方法的作用是:给对象新增属性,或者设置对象原有的属性
        3.怎么用?
            Object.defineProperty(给那个对象新增属性,'新增的这个属性名叫啥',{给新增的属性设置相关的配置项: key:value对})
        4.第三个参数是属性相关的配置项,配置项都有哪些?每个配置项的作用是啥?
         value 配置项:给属性指定值
         writeable 配置项: 设置该属性的值是否可以被修改,true表示可以修改,false表示不能修改
         getter 方法:配置项,不需要我们手动调用.当读取属性值的时候,getter方法被自动调用
         setter 方法配置项目: 不需要我们手动调用.当修改属性值的时候,setter方法被自动调用
         注意: 当配置项当中有setter和饥饿 getter 的时候,value 和 writeable配置项都不能存在.
     -->

    
    
     <script>
        // 这是一个普通的对象
        let phone = {}

        // 修改,解决循环递归
        // 设置一个临时变量 
        let temp
        // 给上面的phone 对象新增一个color属性
        Object.defineProperty(phone,'color',{
         /*    //  注意: 当配置项当中有setter和饥饿 getter 的时候,value 和 writeable配置项都不能存在.
            value : '太空灰',
            writable : true,
 *//* 
            // getter 方法配置项
            get : function () {
                console.log('getter方法执行了');
                return 'hehe'
            },

            // setter方法配置项
            set : function (a,b,c,d) {
                console.log("setter 方法执行了",a,b,c,d);
            }


 */


 // 下面这种方式是:循环递归了
 
            // getter 方法配置项
/*             get : function () {
                console.log('getter方法执行了');
                return this.color
            },

            // setter方法配置项
            // 测试.浏览器控制台运行: phone.color='蓝'
            set : function (val) {
                console.log("setter 方法执行了",val);
                this.color = val
            }
 */


 // 修改



            // getter 方法配置项
            get : function () {
                console.log('getter方法执行了');
                return temp
            },

            // setter方法配置项
            // 测试.浏览器控制台运行: phone.color='蓝'
            set : function (val) {
                console.log("setter 方法执行了",val);
                temp = val
            }

            


        })
     </script>
</body>
</html>